<script setup>

import FileCate from "@/components/Material/cate.vue";
import FileList from "@/components/Material/list.vue";

import {enumToArray} from "@/utils/utils";
import {fileTypeList} from "@/enum/enum";
import {computed, ref, unref, watch} from "vue";

const fileTypes = enumToArray(fileTypeList)
const activeCid = ref(null);
const props = defineProps({
  mode: {
    type: String,
    default: 'page'
  },
  type: {
    type: Number,
    default: 1
  },
  selectLimit: {
    type: Number,
    default: 1
  }
})
const activeKey = ref()
const selected = computed(()=>selectedFiles.value.length)
const selectedFiles = ref([])
const fileListRef = ref();

const handleSelectedCid = (value) => {
  activeCid.value = value;
}

const handleSelectChange = (value) =>{
  const values = unref(value);
  selectedFiles.value = values;
}

const handleRemoveSelected = (value) => {
  fileListRef.value?.removeSelectedFile(value)
}

defineExpose({
  selectedFiles
})

watch(()=>props.type,(newVal)=>{
  if(newVal){
    activeKey.value = newVal;
    activeCid.value = null;
  }
},{immediate:true})
</script>

<template>
  <div style="height: 100%">
    <a-tabs v-if="mode === 'page'" v-model:active-key="activeKey" class="demo-tabs">
      <a-tab-pane v-for="item in fileTypes" :key="item.value" :title="item.label" :name="item.value"/>
    </a-tabs>

    <div class="material-container">
      <file-cate class="left_content" :type="activeKey" @selectedCid="handleSelectedCid"/>
      <file-list ref="fileListRef" class="center_content" :mode="mode" :type="activeKey" :cid="activeCid" :select-limit="selectLimit" @change="handleSelectChange"/>
      <div class="right_content" v-if="mode === 'picker'">
        <div class="flex justify-between text-xs">
          <span>已选择 {{selected}}/{{selectLimit}}</span>
          <a-button type="text" status="danger" class="cursor-pointer" @click="handleRemoveSelected('all')">清空</a-button>
        </div>
        <div class="file-list">
          <li v-for="item in selectedFiles" :key="item.id" class="flex justify-between items-center cursor-pointer">
            <overflow-tooltip :content="item.name"/>
            <icon icon="ep:delete" size="16" color="red" class="ml-2" @click="handleRemoveSelected(item)"/>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.demo-tabs :deep(.el-tabs__header) {
  margin-bottom: 0px;
}

.material-container {
  @apply flex;
  height: calc(100% - 52px);

  .left_content, .right_content {
    flex: 1 0 180px;
    padding-top: 16px;
  }

  .center_content {
    flex: auto;
    padding: 16px 16px 0;
    max-height: calc(100% - 84px);
  }

  .right_content{
    padding-right: 20px;
    .file-list li{
      max-width: 180px;
      margin: 20px 0;
      display: flex;
    }
  }
}
</style>
